<template>
	<view class="container">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="content">隐患列表</block>
		</cu-custom>
		<!-- 顶部面板 -->
		<view class="top--panel">
			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
			<view style="background-color: white;text-align: center;font-size: 28rpx;padding: 10px 0;color: black;">
				<view class="search" @click="showDrawer">
					<uni-icons type="search" size="30"></uni-icons>搜索
				</view>
			</view>
		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="left">
					<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }"
						:scroll-into-view="leftIntoView">
						<view class="item" v-for="(item, index) in leftArray" :key="index"
							:class="{ active: index == leftIndex }" :id="'left-' + index" :data-index="index"
							@tap="leftTap">
							{{ item.project }}({{item.score}}分)
						</view>
					</scroll-view>
				</view>
				<view class="main">
					<scroll-view scroll-y="true" :style="{ height: scrollHeight + 'px' }" @scroll="mainScroll"
						:scroll-into-view="scrollInto" scroll-with-animation="true">
						<view class="item main-item" v-for="(item, index) in mainArray" :key="index"
							:id="'item-' + index">
							<view class="title">
								<view class="text">{{ item.project }}</view>
							</view>
							<view v-for="(data, i) in item.dataList" :key="i">
								<view class="title">
									<view class="h6">{{ data.checkContent }}</view>
								</view>
								<view class="goods" v-for="(criteria, index2) in data.criteriaList" :key="index2">
<!-- 									<view class="h5">
										<view class="span" @click="gotodetail(criteria)">{{ criteria.checkCriteria }}</view>
										<view class="h3 icon-zhengque2" v-if="criteria.status == 1"></view>
										<view class="h4" v-if="criteria.status == 2">隐患数：{{ criteria.num }}</view>
										<view class="h2" v-if="criteria.status == 3"><view class="one icon-jinzhi"></view></view>
										<view class="h1" v-if="criteria.status == null || criteria.status == ''"><view class="h2 background icon-jinzhi" @click="errorshow(criteria,3)"></view><view class="h3 background icon-zhengque2" @click="errorshow(criteria,1)"></view></view>
									</view> -->
									<view class="h5">
										<view class="span" @click="gotodetail(criteria)">{{ criteria.checkCriteria }}
										</view>
										<view class="h1">
											<view v-if="criteria.status != 3 && criteria.num == 0" class="h2 background icon-jinzhi" @click="errorshow(criteria,3)">
											</view>
											<!-- <view class="h3 background icon-zhengque2" @click="errorshow(criteria,1)">
											</view> -->
										</view>
										<!-- <view class="h3 icon-zhengque2" v-if="criteria.status == 1"></view> -->
										<view class="h4" v-if="criteria.status == 2">隐患数：{{ criteria.num }}</view>
										<view class="h2" v-if="criteria.status == 3">
											<view class="one icon-jinzhi"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="fill-last" :style="{ height: fillHeight + 'px' }"></view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 底部面板 -->
		<view class="bottom-panel">
			<!-- 底部面板，可添加所需要放在页面底部的内容代码。比如购物车栏目 -->
			<view class="footer">
				<view class="h6">{{placeName}} </view>
				<view class="h5">隐患数：{{tal()}} </view>
				<view class="h4" v-if="compCheckStatus" @click="compCheck">完成排查</view>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="box">
			<uni-drawer ref="showLeft" :width="320" mode="right">
					<!-- <button @click="closeDrawer">关闭Drawer</button> -->
					<view class="formbox">
						<view class="positop">
							<view class="h5">隐患项清单</view>
							<uni-search-bar @confirm="searchData" v-model="searchValue"></uni-search-bar>
							<view class="h4"><span style="color: red;">*</span>请选择隐患项</view>
						</view>
		
						<uni-forms ref="form">
							<view class="ul border" v-for="item in formData" @click="gotodetail(item,item.id)">
								<!-- <view class="c1 bootm">深圳市龙岗区捷程职业技术培训学校</view> -->
								<view class="c2 bootm">{{item.dangerDesc}}</view>
								<view class="c5">{{item.level}}</view>
							</view>
		
						</uni-forms>
					</view>
				<!-- 	<view class="uni-btn-v">
						<button type="warn" @click="submit">提交</button>
					</view> -->
			</uni-drawer>
		</view>
	</view>
</template>

<script>
	import server from '@/api/server.js'
	export default {
		data() {
			return {
				compCheckStatus:false,
				scrollHeight: 400,
				scrollTopSize: 0,
				searchValue:'',
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				formData:[],
				placeName: '',
				checkNum: '',
				topArr: [],
				leftIndex: 0,
				scrollInto: ''
			};
		},
		computed: {
			/* 计算左侧滚动位置定位 */
			leftIntoView() {
				return `left-${this.leftIndex > 3 ? this.leftIndex - 3 : 0}`;
			}
		},
		onShow() {
			this.checkNum = this.$root.$mp.query.checkNum
			this.placeName = this.$root.$mp.query.placeName
			this.compCheckStatus = this.$root.$mp.query.checkStatus == '0'
			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					});
				}, 200);
			});
		},
		mounted(){
			this.$refs["showLeft"].close();
		},
		methods: {
			cycleclick(){
				this.mainArray.forEach((item,index) => {
					item.dataList.forEach((items,inx) => {
						items.criteriaList.forEach((ite,i) => {
							if(ite.status == null || ite.status == ''){
								server.checkdetailadd({
									checkCriteriaId: ite.id,
									placeCheckId: this.$root.$mp.query.checkId,
									status:1
								}).then(res => {
									this.fun_c()
								})
							}
							
						})
					})
				})

			},
			fun_c(){
				server.listByCheck({
					placeType: this.$root.$mp.query.placeType,
					checkId: this.$root.$mp.query.checkId
				}).then(res => {
						console.log(res)
						this.leftArray = res.data.result;
						this.mainArray = res.data.result;
				
				})
			},
			tal(){
				let num = 0;
				this.mainArray.forEach((item,index) => {
					item.dataList.forEach((items,inx) => {
						items.criteriaList.forEach((ite,i) => {
							num += ite.num
						})
					})
				})
				return num
			},
			errorshow(item,index){
				uni.showModal({
					title: '提示',
					content: index == 1 ? '确定该排查项无问题' : '确定该排查项与本次排查无关',
					success: (showResult) => {
						if(showResult.confirm){
							// uni.showLoading()
							if(index == 3){
								server.checkdetailedit({
									checkCriteriaId: item.id,
									placeCheckId: this.$root.$mp.query.checkId,
									status:index
								}).then(res => {
										console.log(res)
										if(res.data.code == 200){
											this.$tip.success('修改成功!')
											this.getListData()
										}
										// uni.hideLoading();
								})
							}else{
								server.checkdetailadd({
									checkCriteriaId: item.id,
									placeCheckId: this.$root.$mp.query.checkId,
									status:index
								}).then(res => {
										console.log(res)
										if(res.data.code == 200){
											this.$tip.success('修改成功!')
											this.getListData()
										}
										// uni.hideLoading();
								})
							}
							
							
						}

					}
				})
			},
			gotodetail(item,id){
				if(id){
					uni.navigateTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
					url: '/pages/siteinvestigation/troublesdetail?id=' + item.checkCriteriaId + '&checkCriteria=' + item.checkCriteria +'&checkId=' + this.$root.$mp.query.checkId +'&searchId=' + id
					})
				}else{
					uni.navigateTo({
						// ? 后面加要传的参数， 多个参数用 & 隔开 
						url: '/pages/siteinvestigation/troublesdetail?id=' + item.id + '&checkCriteria=' + item.checkCriteria +'&checkId=' + this.$root.$mp.query.checkId
					})
				}

			},
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						console.log(res)
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						});
					}).exec();
				});
			},
			/* 获取列表数据 */
			getListData() {
				uni.showLoading();
				server.listByCheck({
					placeType: this.$root.$mp.query.placeType,
					checkId: this.$root.$mp.query.checkId
				}).then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.leftArray = res.data.result;
						this.mainArray = res.data.result;
						this.tal()
						this.cycleclick()
						// DOM 挂载后 再调用 getElementTop 获取高度的方法。
						this.$nextTick(() => {
							this.getElementTop();
						});
					});

				})
			},
			compCheck() {
				let index = 0
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定完成排查',
					success: (showResult) => {
						if (showResult.confirm) {
							this.mainArray.forEach(item => {
								item.dataList.forEach(items => {
									items.criteriaList.forEach(v => {
										if (v.status == null) {
											index++
										}
									})
								})
			
			
							})
							if (index == 0) {
								let object = {
									id: this.$root.$mp.query.checkId,
									status: 1,
								}
								server.checkedit(object).then(res => {
									console.log(res)
									that.compCheckStatus = false
									uni.showToast({
										title: '全部已完成复查',
										duration: 2000,
										icon: 'none'
									});
								})
							} else {
								uni.showToast({
									title: '还有' + index + '项隐患未复查',
									duration: 2000,
									icon: 'none'
								});
							}
			
						}
			
					}
				})
			
			
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then(res => {
					let topArr = res.map(item => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;

					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						this.fillHeight = this.scrollHeight - last + 20;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = this.topArr.length - 1; i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if (top + 2 >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = index < 0 ? 0 : index;
			},
			showDrawer() {
						this.getlistByCheck('')
						this.$refs["showLeft"].open();
			},
			getlistByCheck(searchValue){
				server.rectifyCheck({
					placeType: this.$root.$mp.query.placeType,
					dangerDesc: searchValue
				}).then(res => {
					console.log(res)
					this.formData = res.data.result
					this.$nextTick(function() {
				
					});
				
				})
			},
			// 搜索回车
			searchData(e){
				console.log(e)
				this.getlistByCheck(e.value)
			},
			/* 左侧导航点击 */
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				this.scrollInto = `item-${index}`;
			}
		}
	};
</script>

<style lang="scss">
	page,
		.container {
			height: 100%;
		}
	
		/* 容器 */
		.container {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
	
			&>view {
				width: 100%;
			}
	
			.scroll-panel {
				flex-grow: 1;
				height: 0;
				overflow: hidden;
			}
	
			.bottom-panel {
				padding-bottom: 0;
				padding-bottom: constant(safe-area-inset-bottom);
				padding-bottom: env(safe-area-inset-bottom);
				
			}
		}
	
		.list-box {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			font-size: 28rpx;
	
			.left {
				width: 200rpx;
				background-color: #f6f6f6;
				box-sizing: border-box;
				box-sizing: border-box;
				font-size: 32rpx;
	
				.item {
					padding-left: 20rpx;
					position: relative;
					padding: 10px;
	
					&:not(:first-child) {
						margin-top: 1px;
	
						&::after {
							content: '';
							display: block;
							height: 0;
							border-top: #d6d6d6 solid 1px;
							width: 620upx;
							position: absolute;
							top: -1px;
							right: 0;
							transform: scaleY(0.5);
							/* 1px像素 */
						}
					}
	
					&.active {
						color: #42b983;
						background-color: #fff;
					}
				}
	
				.fill-last {
					height: 0;
					width: 100%;
					background: none;
				}
			}
	
			.main {
				background-color: #fff;
				padding-left: 20rpx;
				width: 0;
				flex-grow: 1;
				box-sizing: border-box;
	
				.title {
					line-height: 64rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #666;
					background-color: #fff;
					position: sticky;
					top: 0;
					z-index: 19;
	
					.text {
						color: blue;
					}
	
					.h6 {
						color: black;
					}
				}
	
				.item {
					padding-bottom: 10rpx;
					border-bottom: #eee solid 1px;
					padding-right: 8px;
				}
	
				.goods {
					// display: flex;
					// flex-direction: row;
					// flex-wrap: nowrap;
					// justify-content: flex-start;
					// align-items: center;
					// align-content: center;
					margin-bottom: 10rpx;
	
					&>image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 16rpx;
						margin-left: 2px;
					}
	
					.describe {
						font-size: 24rpx;
						color: #999;
					}
	
					.money {
						font-size: 24rpx;
						color: #efba21;
					}
				}
			}
		}
	
		.goods {
			.h5 {
				border-bottom: 1px solid #ccc;
				padding-bottom: 10px;
	
				.span {}
	
				.h4,
				.h3,
				.h2 {
					border-radius: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 20px;
					margin-top: 5px;
				}
	
				.h4 {
					border: 1px solid red;
					color: red;
				}
	
				.h3 {
					border: 1px solid #52c41a;
					color: #52c41a;
					width: 100%;
				}
	
				.h3.background {
					background: #52c41a;
					color: white;
				}
	
				.h2 {
					border: 1px solid orange;
					color: orange;
					width: 100%;
				}
	
				.h2.background {
					background: orange;
					color: white;
				}
	
				.h1 {
					display: flex;
					justify-content: space-between;
				}
			}
	
		}
	
		.footer {
			padding: 20px 15px;
			background: white;
			box-shadow: 2px 1px 8px 0px;
	
			.h6 {
				float: left;
				width: 100%;
				box-sizing: border-box;
				margin-bottom: 10px;
				font-size: 20px;
				position: relative;
				padding-left: 10px;
			}
	
			.h6:before {
				width: 5px;
				content: '';
				height: 21px;
				background-color: #007aff;
				display: inline-block;
				border-radius: 7px;
				position: absolute;
				top: 0;
				left: 0;
			}
	
			.h5 {
				font-size: 14px;
			}
	
			.h4 {
				position: fixed;
				right: 10px;
				bottom: 50px;
				background-color: #007aff;
				padding: 5px 10px;
				color: white;
				border-radius: 30px;
			}
		}
	
	.search {
		display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 14px;
		    border-radius: 5px;
		    background-color: rgb(248, 248, 248);
		    width: 90%;
		    margin: auto;
			padding: 3px;
		    color: #B3B3B3;
			height: 36px;
				.uni-icons {
					margin-right: 5px;
					font-size: 18px!important;
					color: rgb(192, 196, 204)!important;
				}
			}
	
		.box .formbox .ul .c5 {
			padding: unset;
			border-radius: 50%;
			width: 30px;
			line-height: 30px;
			height: 30px;
			text-align: center;
			font-size: 18px;
		}
</style>
